<template>
  <a-modal :width="600" v-model:visible="showSetTimeDialog" title="匹配设置" title-align="start" :mask-closable="false" :on-before-ok="submitData" :ok-loading="submitLoading" @cancel="closedDialog">
    <div style="display: flex">
      <p style="margin: 0 30px">自动识别匹配</p>
      <div>
        <a-switch v-model="isAuto" />
        <p class="info-text">在线商品MSKU与产品库SKU完全一致时,自动进行匹配</p>
      </div>
    </div>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { getConfigStatus, updateConfigStatus } from '@/api/publish'
  import { Message } from '@arco-design/web-vue'

  const emit = defineEmits(['closed', 'success'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
  })

  const showSetTimeDialog = ref(props.isShow)
  const isAuto = ref()
  const submitLoading = ref(false)

  // 查询状态
  async function getStatus() {
    const res: any = await getConfigStatus()
    isAuto.value = res?.data.isAutoBindProduct ? true : false
  }
  getStatus()

  // 关闭
  function closedDialog() {
    isAuto.value = ref()
    showSetTimeDialog.value = false
    emit('closed')
  }
  // 提交
  async function submitData() {
    const res: any = await updateConfigStatus({ isAutoBindProduct: isAuto.value })
    if (res) {
      Message.success('设置成功')
      closedDialog()
      return true
    }
    return false
  }
</script>
<style lang="less" scoped>
  .info-text {
    color: #999;
    margin-top: 10px;
  }
</style>
